import React,{Component} from 'react'
import StudentTitle from './Components/StudentTitle'
import AddStu from './Components/AddStu'
import StuList from './Components/StuList'

class App extends Component {
  // 管理学员信息
  state = {
    studentList : [
      {
        "number": "01",
        "name": "张三",
        "sex": "男",
        "age": 10,
        "time": "2020-12-04",
        "hobbies": ["足球", "篮球"],
        "college": "大前端"
    }, {
        "number": "02",
        "name": "李四",
        "sex": "男",
        "age": 20,
        "time": "2030-12-05",
        "hobbies": ["足球"],
        "college": "Java"
    }, {
        "number": "03",
        "name": "王五",
        "sex": "男",
        "age": 30,
        "time": "2040-11-03",
        "hobbies": ["足球", "篮球"],
        "college": "python"
    }
    ]
  }
  // 处理studentList
  addList = (student,callback)=>{
    this.setState({
      studentList:[...this.state.studentList,student]
    },()=>{
      callback()
      //console.log(this.state.studentList)
    })
  }
  removeStudent = (number)=>{
    const studentList = JSON.parse(JSON.stringify(this.state.studentList))
    // 删除
    const index = studentList.findIndex(student=>student.number === number)

    studentList.splice(index,1)

    this.setState({
      studentList
    })

  }
  render(){
    return(
      <div className={'container'}>
        <StudentTitle />
        <AddStu addList={this.addList} />
        <StuList 
          studentList = {this.state.studentList} 
          removeStudent = {this.removeStudent}
        />
      </div>
    )
  }
}

export default App;
